import React, { Component } from 'react'
import { withStyles } from 'material-ui/styles'
import classnames from 'classnames'
import Typography from 'material-ui/Typography'
import Hidden from 'material-ui/Hidden'
import logo from '../../assets/logo.png'
import siteqr from '../../assets/site.png'


const styles = theme => ({
	root: {
		display: 'flex',
		flexDirection: 'row',
		marginTop: 40,
		marginBottom: 30,
		justifyContent: 'space-between',
		width: '100%'
	},
	flex: {
		flex: 1
	},
	logo: {
		width: 70
	},
	introDesc: {
		lineHeight: 2,
		paddingLeft: 5
	},
	siteqr: {
		width: 60,
		height: 60,
		display: 'block',
		marginBottom: 10
	},
	right: {
		display: 'flex',
		flexDirection: 'column',
		alignItems: 'flex-end',
		flex: 1
	},
	link: {
		textDecoration: 'none',
		fontWeight: 400,
		color: 'rgba(0, 0, 0, 0.54)'
	}
});

const links = [
	{
		name: 'IT大咖说',
		url: 'http://www.itdks.com/'
	},
	{
		name: '小象学院',
		url: 'http://www.chinahadoop.cn/'
	},
	{
		name: '开源力量',
		url: 'http://www.osforce.cn/'
	},
	{
		name: '极客学院',
		url: 'http://www.jikexueyuan.com/'
	},
	{
		name: 'Egghead',
		url: 'https://egghead.io/'
	}
]

@withStyles(styles)
class Footer extends Component {
	constructor(props) {
	  super(props);
	}

	render() {
	  	const classes = this.props.classes;
		return (
      		<div className={classes.root}>
      			<div className={classnames(classes.intro, classes.flex)}>
      				<Typography type="subheading" gutterBottom>
	          			关于我们
					    </Typography>
					    <Typography type="caption" gutterBottom className={classes.introDesc}>
					        IT 课店是一个致力于帮助学习者更快找到好课程的平台, QQ: 521259198
					    </Typography>
					    <Typography type="subheading" gutterBottom>
	          			友情链接
					    </Typography>
					    <Typography type="caption" gutterBottom className={classes.introDesc}>
					    	{
					    		links.map(link => {
					    			return (
					    				<a href={link.url} target='blank' className={classes.link}> {link.name} </a>
					    			)
					    		})
					    	}
					    </Typography>
      			</div>
	      		<Hidden smDown>
	      			<div className={classes.right}>
								<img src={siteqr} className={classes.siteqr}/>
								<Typography type="caption" gutterBottom align="right">
		      				扫一扫 , 在手机上看
					      </Typography>
					      <Typography type="caption" gutterBottom className={classes.introDesc}>
						        浙ICP备17040691号-1 ©2015-2017 ITkedian版权所有
						    </Typography>
	      			</div>
		        </Hidden>
      		</div>
  		)
	}
}

export default Footer;